import { FunctionDirective } from 'vue';
import { singularSdk } from 'singular-sdk';
import { useGlobalStore } from 'stores/global-store';

const SingularEvent: FunctionDirective<HTMLElement, any> = (el, binding) => {
  const { enableSingular } = useGlobalStore();
  if (!enableSingular) {
    return;
  }
  if (!singularSdk.inited) {
    return;
  }
  el.addEventListener('click', () => {
    if (binding.arg) {
      if (binding.value && binding.value !== '') {
        console.log(
          `singular event ${binding.arg} with payload: `,
          binding.value
        );
        singularSdk.event(binding.arg, binding.value);
      } else {
        console.log(`singular event ${binding.arg}`);
        singularSdk.event(binding.arg);
      }
    }
  });
};
export default SingularEvent;
